<template>
  <div class="chat-container">
    <!-- 聊天内容区域 -->
    <div class="chat-messages">
      <!-- 对方消息（左侧） -->
      <div v-for="(msg, index) in otherMessages" :key="index" class="message other">
        <div class="avatar">对方</div>
        <div class="msg-content" v-html="parseMd(msg)"></div>
      </div>
      <!-- 我方消息（右侧） -->
      <div v-for="(msg, index) in myMessages" :key="index" class="message mine">
        <div class="msg-content">{{ msg }}</div>
        <div class="avatar">我</div>
      </div>
    </div>
    <!-- 输入区域 -->
    <div class="chat-input">
      <textarea
        v-model="inputMsg"
        placeholder="输入消息..."
        @keydown.enter.prevent="sendMessage"
      ></textarea>
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { marked } from "marked"; // 引入marked库解析Markdown

const otherMessages = ref([]); // 对方消息列表
const myMessages = ref([]); // 我方消息列表
const inputMsg = ref(""); // 输入框内容

// 模拟流式获取对方MD消息
const simulateStreamOtherMsg = () => {
  const mockMdChunks = [
    "以下是一个使用JavaScript实现的二维数据去重方法，它会根据数组中的对象属性进行去重：javascriptfunctionuniqueTwoDimensionalArray(data,key){returndata.reduce((acc,curr)=>{constisDuplicate=acc.some(item=>item[key]===curr[key]);if(!isDuplicate){acc.push(curr);}returnacc;},[]);}//示例constdata=[{id:1,name:'Alice'},{id:2,name:'Bob'},{id:1,name:'Alice'},{id:3,name:'Charlie'}];constuniqueData=uniqueTwoDimensionalArray(data,'id');console.log(uniqueData);###功能说明：-data是你要去重的二维数组。-key是用于去重的字段名（例如id、name等）。-该方法会根据key字段的值来判断是否为重复项，并只保留第一次出现的项。如果你有其他需求，比如根据多个字段去重，请告诉我，我可以进一步帮助你！",
    "包含\n",
    "换行、",
    "**加粗**、",
    "`代码`等格式"
  ];
  let i = 0;
  const timer = setInterval(() => {
    if (i < mockMdChunks.length) {
      otherMessages.value.push(mockMdChunks[i]);
      i++;
    } else {
      clearInterval(timer);
    }
  }, 500);
};

// 发送我方消息
const sendMessage = () => {
  if (inputMsg.value.trim()) {
    myMessages.value.push(inputMsg.value);
    inputMsg.value = "";
    // 发送后模拟对方流式回复
    simulateStreamOtherMsg();
  }
};

// 解析Markdown为HTML
const parseMd = (md) => {
  return marked.parse(md);
};

onMounted(() => {
  // 页面加载后模拟对方初始流式消息
  simulateStreamOtherMsg();
});
</script>

<style scoped>
.chat-container {
  width: 600px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

.chat-messages {
  height: 400px;
  padding: 10px;
  overflow-y: auto;
}

.message {
  display: flex;
  margin-bottom: 10px;
  align-items: flex-start;
}

.other {
  flex-direction: row;
}

.mine {
  flex-direction: row-reverse;
  text-align: right;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin: 0 10px;
}

.msg-content {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 8px;
  line-height: 1.5;
}

.other .msg-content {
  background: #f0f0f0;
}

.mine .msg-content {
  background: #409eff;
  color: #fff;
}

.chat-input {
  display: flex;
  border-top: 1px solid #ccc;
}

.chat-input textarea {
  flex: 1;
  border: none;
  padding: 10px;
  resize: none;
  height: 80px;
}

.chat-input button {
  width: 80px;
  background: #409eff;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>
